<!DOCTYPE html>
<html lang='en'>

<head>
   <meta charset='UTF-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <title>Document</title>
   <script src='../vue.js'></script>
   <style>
      .public {
         width: 100px;
         height: 100px;
      }
      .active {
         background: red;
      }
      .noActive {
         background: blue;
      }
      .red {
         background: red;
      }
      .blue {
         background: blue;
      }
      .italic {
         font-style: italic;
      }
   </style>
</head>

<body>
   <div id='app'>
      <div class="pulic" :class="isActive?'active':'noActive'">box1</div>
      <div class="pulic" :class="fontColorClass">box2</div>
      <div class="pulic" :class="box3Class">box3</div>
      <div class="pulic" :class="{red:isRed,bold:isBold,italic:isItalic">box4</div>
      <div class="pulic" :class="classArr">box5</div>
   </div>

   <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
      el: '#app',
         data() {
            return {
               isActive: true,
               fontColorClass: 'red',
               box3Class: {
                  red: true,
                  bold: true,
                  italic: true
               },
               classArr: ['red', 'italic'],
               isRed: true,
               isBold: true,
               isItalic: true
            }

         }
      })
   </script>
</body>

</html>